<script setup lang="ts">
import { ref, watchEffect } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
const textRef = ref("");
const inputRef = ref();
watchEffect(() => {
  if (textRef.value) {
    console.log(inputRef.value);
  }
});
const textMD = ref("1111");
const show = ref(true);
</script>

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <Transition>
      <p v-if="show">hello</p>
    </Transition>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" v-model:textMD="textMD" />
  <input ref="inputRef" type="text" v-model.lazy.trim="textRef" />
  <input
    :ref="
      el => {
        console.log(el);
      }
    "
    type="text"
  />
  <div>
    父
    <input v-model="textMD" type="text" />
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
